<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/assets/js/maps.js"></script>
<script type="text/javascript">

/* google map */

function initmap(div) {

	var mapOptions = {
		zoom: 16,
		center: tkk,
		mapTypeControl: false,
		mapTypeId: google.maps.MapTypeId.SATELLITE
	};

	map = new google.maps.Map(document.getElementById(div), mapOptions);

	var ControlDiv = document.createElement('DIV');
	new Control(ControlDiv, "默认视图", showHome);
	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ControlDiv);

	addMarks(mapdatas);

	google.maps.event.addListener(map, 'click', function(event){
		if(!marker)
			marker = new google.maps.Marker({
				position: event.latLng,
				draggable: true,
				map: map
			});
		else marker.setPosition(event.latLng);
	});

}


window.onload = function(){
	initmap("post_map_canvas");
}
</script>

<div class="contentRight">
	<?php if(!lib::islogin()){?>
	<h3>成为拾客？</h3>
	<p>您还没有登录。<br/>
	如果您是拾客成员，<br/>
	请先<a href="login.php">登录</a>后再填写失物招领表；<br/>
	如果您想成为拾客，<br/>
	可以<a href="register.php">点击这里注册</a>；<br/>
	即使不是拾客成员也没有关系，您仍可以提交信息 :)</p>
	<?php }?>
</div>
<div class="contentLeft">
	<h3>登记招领启事</h3>
	<p>登记您拾到的物品并留下您的联系方式。</p>
	<p>如果您是第一次填写，请先阅读<a href="help.php#post" target="_blank">使用说明</a></p>
	<p><?php echo view::show('standard/messages');?></p>
	<p><?php echo view::show('standard/errors');?></p>
	<form action="/post/process" id="postform" method="post" enctype="multipart/form-data">
		<input type="hidden" name="type" value="found" />
		<div id="accordion">
			<h3><a href="#" id="step1">第一步：描述您拾到的物品</a></h3>
			<div>
				<p>* 标记的为必填项</p>
				<table class="formTable">
					<tr><th>* 物品名称</th>
						<td><input type="text" name="what" id="what" value="<?php echo @$view['what']?>"/>
							<span id="checkwhat" class="check"></span></td></tr>
					<tr><th>* 发现时间</th>
						<td><input type="text" name="when" id="datepicker" value="<?php echo @$view['when']?>"/>
							<select name="hours" size="1">
								<option value="8">早上</option>
								<option value="12">中午</option>
								<option value="13">下午</option>
								<option value="18">晚上</option></select>
							<span id="checkdate" class="check"></span>
							<p class="tip">格式请用 YYYY-MM-DD, 例如 2011-02-28</p>
							</td></tr>
					<tr><th>* 发现地点</th>
						<td><table>
								<tr><td><label>公共场所</td><td>楼层/房间号[可选]</td></tr>
								<tr><td><select name="building" id="building">
									<option value="null">请选择</option>
									<option value="北区综合楼">北区综合楼</option>
									<option value="北区超市">北区超市</option>
									<option value="北区食堂">北区食堂</option>
									<option value="风雨体育馆">风雨体育馆</option>
									<option value="学生活动中心">学生活动中心</option>
									<option value="中区食堂">中区食堂</option>
									<option value="图书馆">图书馆</option>
									<option value="主楼群5号楼">主楼群5号楼</option>
									<option value="主楼群4号楼">主楼群4号楼</option>
									<option value="主楼群3号楼">主楼群3号楼</option>
									<option value="主楼群2号楼">主楼群2号楼</option>
									<option value="主楼群1号楼">主楼群1号楼</option>
									<option value="人文楼A">人文楼A</option>
									<option value="人文楼B">人文楼B</option>
									<option value="人文楼C">人文楼C</option>
									<option value="经管楼">经管楼</option>
									<option value="理工楼">理工楼</option>
									<option value="生化大楼C">生化楼C</option>
									<option value="生化大楼B">生化楼B</option>
									<option value="生化大楼A">生化楼A</option>
									<option value="生化大楼主楼">生化主楼</option>
									<option value="公共教学楼1号楼">公共教学楼1号楼</option>
									<option value="南区食堂">南区食堂</option>
									<option value="">不在这些地方</option>
								</select></td>
								<td><input type="text" name="room" id="room" value=""/></td>
							</tr>
						</table>
						<p class=tip>例如：公共教学楼1号楼 513<span class="pipe">/</span>公共教学楼1号楼 二楼</br>如果列表中没有您想要的地点，请使用地图标记</p>
						<span id="checkmap" class="check"></span></td></tr>
					<tr><th></th>
						<td>
							<label><input type="checkbox" class="checkbox" name="usemap" id="usemap"/>使用地图</label>
							<p class="tip">[可选]在地图上标出您拾到物品的地点（<a href="help.php?#map" target="_blank">如何使用地图</a>）</p>
							<input type="hidden" name="mapdata" id="mapdata" value=""></input>
							<div id="post_map_canvas"></div></td></tr>
					<tr><th>物品照片</th>
						<td><input type="file" class="file" name="imagefile" id="imagefile"/>
							<p class="tip">[可选]上传物品的照片，可以便于失主的识别<br/>（200k以内的jpg，gif或png图片）</p>
							<span id="checkfile" class="check"></span></td></tr>
					<tr><th>* 物品描述</th>
						<td><textarea name="detail" id="detail" maxlength="255"><?php echo @$view['detail']?></textarea>
							<p id="checkdetail" class="check"></p>
							<p class="tip">详细描述下当时的情况、物品的细节等</p></td></tr>
					<tr><th>物品标签</th>
						<td><input type="text" name="tag" value="<?php echo @$view['tag']?>"/>
							<span id="checktag" class="check"></span>
							<p class="tip">[可选]标签有助于我们对物品的分类</p></td></tr>
				</table>
			</div>
			<h3><a href="#" id="step2">第二步：留下您的联系方式</a></h3>
			<div>
				<p>留下您的联系方式，以便失主与您联系。</p>
				<table class="formTable">
					<tr><th>帐户类型</th>
						<td><label><input type="radio" class="radio" name="usertype" value="0" <?php if(!lib::islogin()){?>checked="checked"<?php }?>/>使用临时的联系方式</label>
						<?php if(lib::islogin()){?><label><input type="radio" class="radio" name="usertype" value="1" checked="checked"/>使用当前登录的帐号</label></td><?php }?>
					</tr>
				</table>
				<table id="guestinfo" class="formTable" <?php if(lib::islogin()){?>style="display: none;"<?php }?>>
					<tr><th>称呼</th>
						<td><input type="text" name="guest" id="guest" value="<?php echo @$view['guest']?>"/>
							<select name="title" id="title">
								<option value="同学">同学</option>
								<option value="老师">老师</option>
								<option value="先生">先生</option>
								<option value="女士">女士</option>
							</select>
							<span id="checkguest" class="check"></span></td></tr>
					<tr><th>联系方式</th>
						<td><input type="text" name="contact" id="contact" value="<?php echo @$view['contact']?>"/>
							<span id="checkcontact" class="check"></span>
							<p class="tip">可以是您的邮箱、手机或者QQ等</p></td></tr>
					<tr><th>有效时间</th>
						<td><select name="available" id="available">
								<option value="7">一星期</option>
								<option value="15">半个月</option>
								<option value="30" selected="selected">一个月</option>
							</select>
						<p class="tip">有效时间一过，您的联系信息将被删除，以保护您的隐私</p></td></tr>
					<tr><th>修改码</th><td><input type="password" name="editcode" id="editcode"/>
						<p class="tip">由6位字符组成，您可以用这个密码来修改您提交的信息</p>
						<span id="checkeditcode" class="check"></span></td></tr>
				</table>
			</div>
			<h3><a href="#" id="step3">第三步：完成登记</a></h3>
			<div>
				<table class="formTable">
					<tr><th></th><td><p class="check" id="checkform"></p></td></tr>
					<tr><th>验证码</th><td><img src="/assets/seccode.php" id="verifyimg" title="刷新" onclick="changecode()"/> 
						<p class="tip">请输入图中的数字和字母</p> 
						<input type="text" name="seccode" id="seccode"/> 
						<span id="checkseccode" class="check"></span></td></tr> 
					<tr><th></th><td><button type="submit" class="submit" id="submitbtn">立即登记</button></td></tr>
				</table>
			</div>
			</div>
	</form>
	<script>
		var maptype = <?php echo isset($view['maptype'])?$view['maptype']:0?>;
		var building = "<?php echo @$view['building']?>";
		var room = "<?php echo @$view['room']?>";
		var usemap = "<?php echo @$view['usemap']?>";
		var mapdata = "<?php echo @$view['mapdata']?>";
		if(mapdata!="") mapdatas.push([mapdata,null,null,1]);
		var title = "<?php echo @$view['title']?>";
		var available = "<?php echo @$view['available']?>";
		$(function(){
			$('input[name=maptype]').each(function(){
				if($(this).val()==maptype){
					$(this).attr("checked", 1);
					return;
				}
			});
			$('#building').val(building);
			$('#room').val(room);
			if(usemap=="Array") $('#usemap').attr("checked", 1);
			$('#title').val(title);
			$('#available').val(available);
		});
	</script>
</div>
		
<script type="text/javascript">
<!--
$(function(){
	$('#accordion').accordion({autoHeight: false});

	if (!($.browser.msie && $.browser.version == "6.0"))
		$('#datepicker').datepicker({dateFormat: 'yy-mm-dd', maxDate: 0});

	verifycode = /^[0-9]{4}$/i;
	verified = 0;

	$('#what').blur(function(){
		$('#checkwhat').text(($(this).val()=="")?"请输入物品名称":"");
	}).focus();
	$('#datepicker').change(function(){
		$('#checkdate').text(($(this).val()=="")?"请输入日期":"");
	});
	$('input[name=maptype]').click(function(){
		$('#checkmap').text("");
	});
	$('#imagefile').change(function(){
		var file = $(this).val().split(".");
		var ext = file[file.length-1];
		switch(ext){
		case "jpeg":
		case "jpg":
		case "gif":
		case "png":
		case "":
			$('#checkfile').text("");
			break;
		default:
			$('#checkfile').text("文件格式不正确，请重新选择");
	}
	});
	$('#detail').blur(function(){
		$('#checkdetail').text(($(this).val()=="")?"请描述下与物品有关的信息":"");
	});
	$('input[name=usertype]').change(function(){
		if($(this).val()=="0")
			$('#guestinfo').show();
		else
			$('#guestinfo').hide();
	});
	$('#guest').blur(function(){
		$('#checkguest').text(($(this).val()=="")?"请输入您的称呼":"");
	});
	$('#contact').blur(function(){
		$('#checkcontact').text(($(this).val()=="")?"请输入您的联系方式":"");
	});
	$('#editcode').blur(function(){
		$('#checkcode').text(($(this).val().length<6)?"请输一个合适的修改码":"");
	});
	$('#seccode').blur(function(){
		if(!verifycode.test($(this).val())){
			$('#checkseccode').text("验证码为4位数字");
		}else{
			$.getJSON("/check/seccode/"+$(this).val(),function(data){
				$("#checkseccode").text(data.msg);
				verified = data.code;
			});
		}
	});
	
	function checkmap(){
		if($('#usemap').attr("checked")){
			if(!marker){
				$('#checkmap').text("请在地图上标出区域");
				return false;
			}
		}else{
			if($('#building').val()=="null"){
				$('#checkmap').text("请选择一种位置类型");
				return false;
			}
		}
		$('#checkmap').text("");
		return true;
	}

	function checkform(){
		if($('#what').val()==""){$('#what').blur().focus(); return false;}
		if($('#datepicker').val()==""){$('#datepicker').change().focus(); return false;}
		if(!checkmap()){$('#building').focus(); return false;}
		var file = $('#imagefile').val().split(".");
		var ext = file[file.length-1];
		switch(ext){
			case "jpeg":
			case "jpg":
			case "gif":
			case "png":
			case "":
				break;
			default:
				$('#imagefile').focus();
				return false;
		}
		if($('#detail').val()==""){$('#detail').blur().focus(); return false;}
		return true;
	}
	function checkuser(){
		if($('input[name=usertype]:checked').val()=="0"){	// 临时用户
			if($('#guest').val()==""){$('#guest').blur().focus(); return false;}
			if($('#contact').val()==""){$('#contact').blur().focus(); return false;}
			if($('#editcode').val().length<6){$('#editcode').blur().focus(); return false;}
		}
		return true;
	}

	$('#step2').click(function(){
		return checkform();
	});

	$('#step3').click(function(){
		if(!checkform()) return false;
		if(!checkuser()) return false;
	});

	$('#accordion').bind("accordionchangestart", function(event, ui){
		if(!checkform()){$('#checkform').text("物品信息不正确，请检查"); return false;}
		if(!checkuser()){$('#checkform').text("联系信息不正确，请检查"); return false;}
		$('#checkform').text("现在可以提交啦！");
	});

	$('#submitbtn').click(function(){
		if(marker){
			var mapdata = "POINT(";
			mapdata += marker.getPosition().toUrlValue().split(',').join(' ');
			mapdata += ")";
		}else{
			mapdata = "";
		}
		$('#mapdata').val(mapdata);
		if(!verifycode.test($('#seccode').val())){$('#seccode').blur().focus(); return false;}
		if(!verified){$('#seccode').focus(); return false;}
		if(!checkform()) return false;
		if(!checkuser()) return false;
	});
});
//-->
</script>
<!-- main ends -->